<template>
    <div id="map">
    </div>
</template>

<script>
    import 'ol/ol.css';
    import GeoJSON from 'ol/format/GeoJSON';
    import Map from 'ol/Map';
    import OSM from 'ol/source/OSM';
    import VectorSource from 'ol/source/Vector';
    import View from 'ol/View';
    import {
        Select,
        Translate,
        defaults as defaultInteractions,
    } from 'ol/interaction';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';

    export default {
        name: "TranslateInteraction",
        data() {
            return {};
        },
        mounted() {
            const raster = new TileLayer({
                source: new OSM(),
            });

            //渲染的世界矢量地图
            const vector = new VectorLayer({
                source: new VectorSource({
                    url: 'http://localhost:8888/openlayer/geojson/countries.geojson',
                    format: new GeoJSON(),
                }),
            });

            //选中效果
            const select = new Select();
            //平移效果组件
            const translate = new Translate({
                features: select.getFeatures(),//选中之后的要素
            });

            const map = new Map({
                interactions: defaultInteractions().extend([select, translate]),//通过默认控件扩展选中与平移交互
                layers: [raster, vector],
                target: 'map',
                view: new View({
                    center: [0, 0],
                    zoom: 2,
                }),
            });
        },
        methods: {},
    };
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        z-index: 9999;
    }
</style>
